<template>
	<view class="content">
		<!--吸顶-->
		<view class="filter-bar">
			<view class="sort-list">
				<sort v-for="(item, index) in sort" :key="index" :active="item.active" :index="index" :order="item.order" :title="item.title"
				 @changeSort="changeSort"></sort>
			</view>
			<view class="check-list">
				<checkbox-group @change="changeCoupon">
					<checkbox :checked="isChecked" color="#F70114" style="transform:scale(0.7)" />
					优惠券
				</checkbox-group>
			</view>
		</view>

		<!--商品列表-->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in list[0].goodsList" :key="item.gid" @tap="toDetail(item)">
				<view class="img-box">
					<image class="image" :src="item.pic" alt="" />
				</view>
				<view class="goods-content">
					<text class="goods-name">{{ item.title }}</text>
					<view class="goods-price">
						<view class="deal">
							¥<text>{{ item.endPrice }}</text>
						</view>
						<text class="original">¥{{ item.price }}</text>
					</view>
					<view class="sale">销量{{ item.sale | formatMyriadNum }}</view>
					<view class="discount">
						<view class="coupon">
							<view class="circle-left"></view>
							<view class="circle-right"></view>
							{{ item.couponMoney }}元券
						</view>
						<view class="subsidy">
							<view class="circle-left"></view>
							<view class="circle-right"></view>
							补贴¥{{ item.allowanceMoney }}
						</view>
					</view>
				</view>
			</view>

			<view class="skeleton-wrap" v-if="list[0].goodsList.length === 0 && !list[0].finished && !list[0].empty">
				<!--商品骨架-->
				<skeleton class="goods-skeleton-column" avatarShape="square" :row="3" avatarSize="300rpx" v-for="i in ['a', 'b', 'c', 'd']"
				 :key="i"></skeleton>
			</view>

			<!-- 加载中插件 -->
			<load-more :loading="list[0].loading" :finished="list[0].finished" :empty="list[0].empty"></load-more>

			<!--回到顶部-->
			<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
				<text class="iconfont icon-huidaodingbu"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '@/utils/packges/moment';
	import loader from '@/utils/mixin/loader';
	import Sort from "@/components/Sort";
	import LoadMore from "@/components/LoadMore";
	import Skeleton from '@/components/uni/Skeleton';

	export default {
		name: 'special-fresh',
		components: {
			Sort,
			LoadMore,
			Skeleton
		},
		mixins: [loader],
		data() {
			return {
				sort: [{
						title: "综合",
						active: true,
						order: "desc",
					},
					{
						title: "销量",
						active: false,
						order: "",
					},
					{
						title: "价格",
						active: false,
						order: "",
					},
				],
				isChecked: true,
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			// 页面初始化
			init() {
				uni.showLoading({
					title: '加载中'
				});
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
				this.loadMore(this.list[0]);
			},
			// 加载前参数处理
			beforeLoad(item) {
				this.params.startTime = moment().format('YYYY-MM-DD 00:00:00');
				this.params.endTime = moment().format('YYYY-MM-DD 23:59:59');
				this.params.hasCoupon = this.isChecked ? 1 : 0;

				this.service = this.$service.shopping.goods.page(this.params);
				return true;
			},
			// 排序筛选
			changeSort(index, order) {
				this.sort.forEach((item) => {
					item.active = false;
					item.order = "";
				});
				this.sort[index].order = order;
				this.sort[index].active = true;
				this.params.sort = order;

				switch (index) {
					case 0:
						this.params.order = "ysqLevel";
						break;
					case 1:
						this.params.order = "sale";
						break;
					case 2:
						this.params.order = "endPrice";
						break;
					default:
						this.params.order = "";
				}
				if (!order) {
					this.params.order = "";
				}

				this.onRefresh(this.list[0]);
			},
			// 优惠券筛选
			changeCoupon() {
				this.isChecked = !this.isChecked;
				this.onRefresh(this.list[0]);
			},
			// 跳转至商品详情
			toDetail(item) {
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						gid: item.gid
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F6F7FA;

		.filter-bar {
			padding: 20rpx 0;
			background: $color-white;
			display: flex;
			position: sticky;
			top: 0rpx;
			box-sizing: border-box;
			border-bottom: 4rpx solid #F5F5F5;
			z-index: 1000;

			.sort-list {
				display: flex;
				width: 74%;
				border-right: 2rpx solid #c8c8c8;
			}

			.check-list {
				width: 36%;
				padding-right: 10rpx;
				font-size: 26rpx;
				color: #727272;
				@include flexBox(center);

				.uni-checkbox-input {
					border-color: $main-color;
					color: $main-color;
				}
			}
		}

		.goods-list {
			width: 100%;
			@include flexBox(center, null, null, wrap);
			padding: 20rpx 20rpx 10rpx;

			.goods-item {
				width: 345rpx;
				height: 590rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background: $color-white;
				box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.1);

				&:nth-child(2n) {
					margin-right: 0;
				}

				.img-box {
					width: 345rpx;
					height: 345rpx;

					.image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.goods-content {
					padding: 12rpx;
					height: 220rpx;
					@include flexBox(space-between, null, column);

					.goods-name {
						font-size: 26rpx;
						color: #3a3a3a;
						font-weight: 400;
						line-height: 34rpx;
						@include ellipsis(2);
					}

					.goods-price {
						color: $text-grey-default;
						font-size: 20rpx;
						margin-top: 10rpx;
						@include flexBox(null, center);

						.deal {
							color: $main-color;
							font-weight: 600;
							font-size: 26rpx;
							margin-right: 10rpx;

							span {
								font-size: 32rpx;
							}
						}

						.original {
							text-decoration: line-through;
						}
					}

					.sale {
						color: $text-grey;
						font-size: 24rpx;
					}

					.discount {
						height: 28rpx;
						margin-top: 10rpx;
						display: flex;

						.coupon {
							line-height: 28rpx;
							padding: 0 18rpx;
							background: $main-color;
							border-radius: 4rpx;
							display: inline;
							font-size: 20rpx;
							color: $color-white;
							position: relative;
							margin-right: 20rpx;
						}

						.subsidy {
							line-height: 28rpx;
							padding: 0 18rpx;
							background: #ffeed1;
							border-radius: 4rpx;
							display: inline;
							font-size: 20rpx;
							color: #925114;
							position: relative;
						}

						.circle-left {
							width: 12rpx;
							height: 12rpx;
							background: #fff;
							position: absolute;
							border-radius: 50%;
							top: 50%;
							margin-top: -6rpx;
							left: -6rpx;
						}

						.circle-right {
							width: 12rpx;
							height: 12rpx;
							background: #fff;
							position: absolute;
							border-radius: 50%;
							top: 50%;
							margin-top: -6rpx;
							right: -6rpx;
						}
					}
				}
			}

			.skeleton-wrap {
				width: 100%;
				border-radius: 8rpx;
				@include flexBox(space-around, null, null, wrap);
			}
		}
	}
</style>
